<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
	</head>
	  <style>
	    #div  input{
	    	  background:whitesmoke;
	    	  }
        #div .active{
        	background:red;
        	color: white;
        	  }
        #div div{
            width:200px;height:100px;
            background:yellowgreen;
            display: none;
          }
	</style>
	<body>
		<div id="div">
			<input type="button"  value="选项一" class="active"/>
			<input type="button"  value="选项二" />
			<input type="button"  value="选项三" />
	          <div style="display: block;">1111</div>
	          <div>2222</div>
	          <div>3333</div>
		</div>
		<script>
			 function tab(obj) {
                  var oDiv = document.getElementById(obj);
                  this.Btn = oDiv.getElementsByTagName("input");
                  this.Div = oDiv.getElementsByTagName("div");
                  var _this = this;
		        for(var i = 0;i < this.Btn.length; i++){
		            this.Btn[i].index = i;
		            this.Btn[i].onclick = function () {
		                _this.show(this);
		            }
		        }
           }
    tab.prototype.show = function (oBtn) {
        for (var i = 0; i < this.Btn.length; i++) {
            this.Btn[i].className = "";
            this.Div[i].style.display = "none";
        }
        oBtn.className = "active";
        this.Div[oBtn.index].style.display = "block";

    };
    var tap =new tab("div");
		</script>
	</body>
</html>
